<template>
	<view class="">
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in dataList" :key="item.id" @click="click"
			@open="open" :options="options">
			<view class="u-flex u-row-between">
				<view class="u-m-20 value-style">
					<view class="u-flex u-row-between">
						<view class="u-flex-nowrap u-font-12">{{item.title}}</view>
						<view class="u-flex-nowrap u-tips-color">{{item.createTime}}</view>
					</view>
					<view class="u-tips-color u-m-t-20">
						<view>{{item.content}}</view>
					</view>
				</view>
			</view>
			<u-line color="#18b566 " border-style="dotted"></u-line>
		</u-swipe-action>
		<view class="u-m-20">
			<u-button @click="addSuggest" type="success" :custom-style="{'border-radius':'20rpx'}" throttle-time="500"
				hover-class="none">新增建议</u-button>
		</view>
		<u-popup v-model="showPopup" mode="center" border-radius="20" :closeable="true" width="80%"
			:safe-area-inset-bottom="true">
			<view class="u-bg-fff u-p-30 u-m-20">
				<view class="u-p-10 u-m-t-40 u-content-color u-font-18 u-flex u-row-center">
					建议信息
				</view>
				<view class="u-flex u-p-10 u-m-t-40 u-bg">
					<view class="u-flex-nowrap u-content-color u-font-12">
						建议标题：
					</view>
					<view class="u-flex-nowrap">
						<u-input v-model="title" type="text" placeholder="请输入建议标题" maxlength="25" confirm-type="提交" />
					</view>
				</view>
				<view class="u-p-10 u-m-t-40 u-bg">
					<view class="u-content-color u-font-12">
						建议内容
					</view>
					<view class="u-m-t-10">
						<u-input v-model="content" type="textarea" placeholder="请输入建议内容" confirm-type="提交" />
					</view>
				</view>
				<view class="u-m-t-30">
					<u-button :loading="isLoad" @click="submit" type="success" :custom-style="{'border-radius':'20rpx'}"
						throttle-time="500" hover-class="none">{{submitValue}}</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				dataList: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				isLoad: false,
				status: 'loadmore',
				iconType: 'flower',
				showPopup: false,
				id: '',
				title: '',
				content: '',
				submitValue: '提 交',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			if (!_this.os_token) {
				_this.goReLaunchUrl('/pages/user/login')
			}
			_this.selectSuggestInfo()
		},
		methods: {
			//新增建议提交
			submit() {
				_this.addAndUpdateSuggestInfo()
			},
			//新增或者更新建议信息
			async addAndUpdateSuggestInfo() {
				console.log("addAndUpdateSuggestInfo")
				_this.isLoad = true
				if (!_this.title) {
					_this.$u.toast('请输入建议标题')
					_this.isLoad = false
					return
				}
				if (!_this.content) {
					_this.$u.toast('请输入建议内容')
					_this.isLoad = false
					return
				}
				await _this.$u.api.addAndUpdateSuggestInfo({
					id: _this.id,
					title: _this.title,
					content: _this.content
				}).then((res) => {
					_this.$u.toast('建议添加成功')
					_this.isLoad = false
					_this.showPopup = false
					_this.selectSuggestInfo()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//删除对应建议
			async deleteSuggestInfo() {
				console.log("deleteSuggestInfo")
				await _this.$u.api.deleteSuggestInfo({
					id: _this.id
				}).then((res) => {
					_this.$u.toast(`删除成功`);
					_this.selectSuggestInfo()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//查询建议信息
			async selectSuggestInfo() {
				console.log("selectSuggestInfo")
				await _this.$u.api.selectSuggestInfo().then((res) => {
					console.log("selectSuggestInfo" + JSON.stringify(res))
					if (res) {
						_this.dataList = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},

			click(index, index1) {
				console.log("index:" + index + "index1：" + index1)
				if (index1 == 0) {
					//修改
					_this.id = _this.dataList[index].id
					_this.title = _this.dataList[index].title
					_this.content = _this.dataList[index].content
					_this.showPopup = true
					_this.submitValue = '更 新'
				} else {
					_this.dataList[index].show = false
					_this.id = _this.dataList[index].id
					_this.deleteSuggestInfo()
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				_this.dataList[index].show = true;
				_this.dataList.map((val, idx) => {
					if (index != idx) _this.dataList[idx].show = false;
				})
			},
			//新增建议
			addSuggest() {
				_this.id = ''
				_this.title = ''
				_this.content = ''
				_this.submitValue = '提 交'
				_this.showPopup = true
			},
			//跳转到页面，关闭其他页面
			goReLaunchUrl(path, params) {
				_this.$u.vuex('os_token', '');
				_this.$u.vuex('os_user', '');
				uni.reLaunch({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-bg {
		background-color: $u-bg-color;
	}

	.value-style {
		width: 70%;
	}

	.u-bg-fff {
		background-color: #FFFFFF;
	}
</style>